<template>
  <div>
    <el-form
      ref="form"
      :model="menuList"
      label-width="110px"
      size="small"
      v-if="menuList"
    >
      <el-form-item label="是否显示导航">
        <el-switch
          class="zdySwith"
          :width="82"
          :value="menuList.show"
          active-color="#13ce66"
          @change="updateInput($event, 'show')"
          inactive-color="#ffffff"
          active-text="显示"
          inactive-text="隐藏"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="导航样式">
        <el-select
          :value="menuList.style"
          placeholder="请选择个数"
          @change="changeMenu"
        >
          <el-option label="一行五个" value="5"></el-option>
          <el-option label="一行四个" value="4"></el-option>
          <el-option label="一行三个" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>
      <div
        class="common-sjh-image-list-card"
        v-for="(item, i) in menuList.banner"
        :key="i"
      >
        <div class="image-card-wrap">
          <div class="image-card-move">
            <el-tooltip
              class="item"
              effect="dark"
              :content="i == 0 ? '第一个无法上移' : '上移'"
              placement="top-start"
            >
              <i
                class="el-icon-top turn-up"
                @click="toCheckArrIndex(i, 'up')"
                :class="{ notTurnUp: i == 0 }"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                i == menuList.banner.length - 1 ? '最后一个无法下移' : '下移'
              "
              placement="top-start"
            >
              <i
                class="el-icon-bottom turn-down"
                @click="toCheckArrIndex(i, 'down')"
                :class="{ notTurnUp: i == menuList.banner.length - 1 }"
              ></i>
            </el-tooltip>
          </div>
          <div class="image-card-cell common-sjh-img-card-image-4-3">
            <div class="sjh-image-editor">
              <uploadpic
                :piclink="item.piclink"
                :width="80"
                :height="80"
                :is_tip="false"
                :real_width="100"
                :real_height="160"
                :is_more="false"
                @send_pic="upload_pic($event, i)"
              ></uploadpic>
            </div>
            <div class="image-input-text">
              <div class="link-detail-url">
                <el-input
                  placeholder="请输入内容"
                  v-model="item.title"
                  size="mini"
                >
                  <template slot="prepend">标题</template>
                </el-input>
              </div>
              <div class="link-detail-icon">
                <el-radio-group v-model="item.desc" size="mini">
                  <el-radio-button label="">无角标</el-radio-button>
                  <el-radio-button label="1">热门</el-radio-button>
                  <el-radio-button label="2">推荐</el-radio-button>
                  <el-radio-button label="3">抢购</el-radio-button>
                </el-radio-group>
              </div>
              <div class="wt-link-comp">
                <div class="wt-link-comp-content">
                  <div class="add-btn" v-if="item.links == ''">
                    <LinkMenu
                      :index="i"
                      @sendRow="getSendRow"
                      style="position: absolute; z-index: 1; opacity: 0"
                    ></LinkMenu>
                    <div class="el-icon-plus"></div>
                    添加链接
                  </div>
                  <div class="link-detail-wrapper tl" v-else>
                    <div class="link-detail">
                      <div class="link-detail-url">
                        <el-input
                          placeholder="请输入内容"
                          v-model="item.links"
                          size="mini"
                        >
                          <template slot="prepend">{{
                            item.introduction | ellipsis
                          }}</template>
                        </el-input>
                      </div>
                      <div
                        class="link-detail-editor"
                        @click="dellinks(i)"
                        title="删除"
                      >
                        <div class="btns">删除链接</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <i
            class="el-icon-close del-advertiseme"
            @click="delBannerItem(i, item.id)"
            title="删除"
          ></i>
        </div>
      </div>

      <div class="btnAdd" @click="addMenu">
        <i class="el-icon-plus"></i>
      </div>
    </el-form>
  </div>
</template>

<script>
const KEY = "menu";
import uploadpic from "@/components/page/pic/up_pic";
import LinkMenu from "@/components/currency/Link_menu.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeNames: ["1"],
    };
  },
  components: {
    uploadpic,
    LinkMenu,
  },
  computed: {
    ...mapState({
      menuList: (state) => state.modulePage.data.menu,
    }),
  },
  created() {},
  mounted() {},
  methods: {
    dellinks(i) {
      this.$store.commit("setBanner", {
        key: KEY,
        index: i,
        val: "",
        name: "links",
      });
    },
    toCheckArrIndex(i, status) {
      //排序
      var index2 = "";
      if (status == "up") {
        index2 = i - 1;
      } else {
        index2 = i + 1;
      }
      this.$store.commit("sortBanner", {
        key: KEY,
        index1: i,
        index2: index2,
        status: status,
      });
    },
    updateInput(e, type) {
      this.$store.commit("setModuleName", { key: KEY, name: type, val: e });
    },
    hideModules() {
      this.$swal({
        title: "您确定要删除这个栏目吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$store.commit("hideModules", "menuList");
        } else if (willDelete.dismiss == "cancel") {
          this.$swal("已取消", "您取消了删除操作", "error");
        }
      });
    },
    delBannerItem(i, id) {
      this.$store.commit("delBanner", { key: KEY, index: i, id: id || 0 });
    },
    addMenu() {
      this.$store.commit("addBanner", KEY);
    },
    setMenuItem(val, obj) {
      this.$store.commit("setBanner", {
        key: KEY,
        index: obj.index,
        val: val,
        name: obj.name,
      });
    },

    changeMenu(e) {
      console.log(e);
      this.$store.commit("setModuleName", { key: KEY, name: "style", val: e });
    },
    upload_pic(pic, i) {
      this.setMenuItem(pic, { index: i, name: "piclink" });
    },
    getSendRow(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      console.log(result);
      if (result.title != "自定义链接") {
        this.setMenuItem(result.desc, {
          index: result.index,
          name: "introduction",
        });
        this.setMenuItem(result.links, {
          index: result.index,
          name: "links",
        });
      } else {
        this.setMenuItem("自定义链接", {
          index: result.index,
          name: "introduction",
        });
        this.setMenuItem(" ", { index: result.index, name: "links" });
      }
    },
  },
};
</script>

<style scoped lang="less">
.banner-box {
  background: #f0f0f0;
  padding: 20px 0 10px;
  margin-bottom: 10px;
  position: relative;
}
.link-detail-icon {
  width: 100%;
  padding: 15px 0 0;
  text-align: left;
}
</style>
